<div class="row">
    <div class="col-md-12">
        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">List of ATT&CK patterns ({{$vm.list.values.length || 0}} of {{$vm.list.total}})</h3>
            </div>
            <div class="box-body">
                <div ng-include="'views/partials/admin/attack/list/toolbar.html'"></div>

                <div class="mt-xs filter-panel" ng-include="'views/partials/admin/attack/list/filters.html'" ng-show="$vm.filtering.context.showFilters"></div>

                <div class="row mt-xs">
                    <div class="col-md-12 clearfix">

                        <filters-preview filters="$vm.filtering.context.filters"
                            on-clear-item="$vm.removeFilter(field)"
                            on-clear-all="$vm.clearFilters()"></filters-preview>
                    </div>
                </div>

                <div class="row mv-s" ng-show="$vm.loading === false && $vm.list.values.length === 0">
                    <div class="col-md-12">
                        <div class="empty-message">No ATT&CK patterns found.</div>
                    </div>
                </div>

                <div class="row mv-s" ng-show="$vm.loading === true">
                    <div class="col-md-12">
                        <div class="loading-message">
                            <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
                            <span>loading patterns...</span>
                        </div>
                    </div>
                </div>

                <!-- Datalist  -->
                <div class="row mt-s" ng-if="$vm.loading === false && $vm.list.values.length > 0">
                    <psearch control="$vm.list"></psearch>

                    <div class="col-md-12">
                        <table class="table table-striped case-list">
                            <thead>
                                <tr>
                                    <th width="100">ID</th>
                                    <th width="200">Name</th>
                                    <th width="200">Sub-Technique of</th>
                                    <th width="200">Tactics</th>
                                    <th>Description</th>
                                    <th width="120"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="pattern in $vm.list.values">
                                    <td>
                                        <a href ng-click="$vm.show(pattern.patternId)">{{::pattern.patternId}}</a>
                                    </td>
                                    <td ng-class="{'text-danger': pattern.revoked}">{{::pattern.name}}</td>
                                    <td>
                                        <span ng-if="!pattern.extraData.parent">-</span>
                                        <span ng-if="::pattern.extraData.parent">
                                            <a href ng-click="$vm.show(pattern.extraData.parent.patternId)" class="mr-xxs">{{::pattern.extraData.parent.patternId}}</a>
                                            <a href ng-click="$vm.addFilterValue('parent', pattern.extraData.parent.patternId)"><i class="fa fa-filter"></i></a>
                                        </span>

                                    </td>
                                    <td>
                                        <div ng-repeat="tactic in ::pattern.tactics" class="mb-xxs">
                                            <span class="label label-default clickable" ng-click="$vm.addFilterValue('tactics', tactic)">{{tactic}}</span>
                                        </div>
                                    </td>
                                    <td class="wrap">
                                        {{::pattern.description | limitTo:250}}...
                                    </td>
                                    <td class="clearfix">
                                        <div class="pull-right">
                                            <a class="btn btn-icon btn-clear" href="{{::pattern.url}}" target="_blank">
                                                <i class="text-primary fa fa-external-link"></i>
                                            </a>

                                            <a class="btn btn-icon btn-clear" href  ng-click="$vm.show(pattern.patternId)" uib-tooltip="Show pattern">
                                                <i class="text-primary fa fa-search"></i>
                                            </a>
<!--
                                            <a class="btn btn-icon btn-clear" href  ng-click="$vm.remove(pattern)" uib-tooltip="Delete pattern">
                                                <i class="text-danger fa fa-trash"></i>
                                            </a> -->
                                        </div>

                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <psearch control="$vm.list"></psearch>
                </div>
            </div>
        </div>
    </div>
</div>
